import React from 'react';
import classNames from 'classnames';
import FileButton from './FileButton';
import { sizeCaculator } from '../utils';

export default function FileName(props) {
    const {
        listType,
        file = {},
        ifShowCardName,
        onPreview,
        ...otherProps
    } = props;

    if (listType === 'card' && !ifShowCardName) {
        return null;
    }

    const href = file.url;

    const title = `${file.name}(${sizeCaculator(file.size)})`;

    const renderName = () => {
        if (file.state === 'uploaded') {
            return (
                <FileButton
                    listType={listType}
                    file={file}
                    href={href}
                    name="preview"
                    prefixCls="file-name_link"
                    onClick={e => {
                        onPreview(file, e);
                    }}
                    title={title}
                    {...otherProps}
                >
                    {file.name}
                </FileButton>
            );
        } else {
            return <span title={title}>{file.name}</span>;
        }
    };

    return (
        <div className={classNames([
            'file-name',
            `file-name--${listType}`,
            `file-name--${file.state}`
        ])} title={title}>
            {renderName()}
            <span className={classNames([
                'file-name_size',
                `file-name_size--${listType}`
            ])}>({sizeCaculator(file.size)})</span>
        </div>
    );
}